{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['系统管理:system/user/index', '角色管理'])}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                    <div id="toolbar" class="toolbar-btn-action">
                    <button type="button" class="btn btn-success me-1 btn-sm" onclick="add();">
                        <span class="mdi mdi-plus"></span> 新增
                    </button>
                    </div>
                    <table id="table"></table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h6 class="modal-title" id="exampleModalLiveLabel">角色信息</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form action="{:url('system/role/save')}" method="post" class="input-form needs-validation" novalidate>
          <input type="hidden" name="id" value="" id="post-id">
          <div class="modal-body">
            <div class="mb-3 row">
              <label for="dataScope" class="col-sm-3 col-form-label">数据权限</label>
              <div class="col-sm-9">
                <select id="dataScope" name="dataScope" class="form-select">
                    {volist name="dataScope" id="item"}
                    <option value="{$key}">{$item}</option>
                    {/volist}
                </select>
              </div>
          </div>
                  <div class="mb-3 row">
                      <label for="name" class="col-sm-3 col-form-label">角色名称 <font color="red">*</font></label>
                      <div class="col-sm-9">
                          <input type="text" class="form-control" id="name" name="name" autocomplete="off" required>
                      </div>
                  </div>
                  <div class="mb-3 row">
                      <label for="sort" class="col-sm-3 col-form-label">显示顺序 <font color="red">*</font></label>
                      <div class="col-sm-9">
                          <input type="text" class="form-control" id="sort" name="sort" autocomplete="off" required>
                      </div>
                  </div>
          </div>
          <div class="modal-footer">
              <button type="submit" class="btn btn-primary">确定</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          </div>
      </form>
      </div>
    </div>
</div>

<script>
    var myModal = null;
    var layerIndex;
 function add(){
    $('.input-form')[0].reset();
    $('#post-id').val('');
    myModal.show();
 }
 function editPost(id){
    $.post("{:url('system/role/view')}", {id: id}, function (res){
        $('#post-id').val(id);
        $('#dataScope').val(res.data_scope);
        $('#name').val(res.name);
        $('#sort').val(res.sort);
        myModal.show();
    });
 }
 function removePost(id){
    xp_confirm("{:url('system/role/remove')}", {id: id}, function (){
        $('#table').bootstrapTable('refresh');
    });
 }
 function setStatus(id){
    xp_confirm("{:url('system/role/status')}", {id: id}, function (){
        $('#table').bootstrapTable('refresh');
    });
 }
 function setMenu(id){
    layerIndex = open_layer('设置菜单权限', "{:url('system/role/menu')}?id=" + id + "&iframe=1", function (){
        $('#table').bootstrapTable('refresh');
    }, ["50%", "50%"]);
 }
 function setDept(id){
    layerIndex = open_layer('设置数据权限', "{:url('system/role/dept')}?id=" + id + "&iframe=1", function (){
        $('#table').bootstrapTable('refresh');
    }, ["50%", "50%"]);
 }
 $(function (){
    myModal = new bootstrap.Modal($('#myModal'));
    validation_form('.input-form', function (){
        myModal.hide();
        $('#table').bootstrapTable('refresh');
    });
    $('#table').bootstrapTable({
          toolbar: '#toolbar',
          classes: 'table table-bordered table-hover table-striped lyear-table',
          url: "{:url('system/role/data')}",
          pagination: false,
          search: false,
          columns: [
              {'field': 'id', title: 'ID', formatter: function(value, item){
                return value == 0 ? '-' : value;
              }},
              {'field': 'name', title: '角色名称'},
              {'field': 'menu_scope', title: '菜单权限', formatter: function(value, item){
                if (item.id == 0){
                    return '-';
                }
                return `<span class="badge bg-info" onclick="setMenu('${item.id}');" style="color: white; cursor: pointer;"><span class="mdi mdi-cog-outline"></span> 设置菜单</span>`
              }},
              {'field': 'data_scope', title: '数据权限', formatter: function(value, item){
                if (item.id == 0){
                    return `<span class="badge bg-success">` + value + `</span>`;
                }
                if (item.scope_id == 2){
                    return `<span class="badge bg-info" onclick="setDept('${item.id}');" style="color: white; cursor: pointer;"><span class="mdi mdi-cog-outline"></span> ` + value + `</span>`
                }
                return `<span class="badge bg-secondary">` + value + `</span>`;
              }},
              {'field': 'sort', title: '显示顺序'},
              {'field': 'status', title: '状态', formatter: function(value, item){
                if (item.id == 0){
                    return `<span class="badge bg-success">正常</span>`;
                }
                var dom = value == 1 ? `<span class="badge bg-danger">停用</span>` : `<span class="badge bg-success">正常</span>`;
                return `<span style="cursor: pointer;" onclick="setStatus('${item.id}');">${dom}</span>`;
              }},
              {'field': 'update_time', title: '更新时间'},
              {'field': 'actions', title: '操作', formatter: function(value, item){
                if (item.id == 0){
                    return '-';
                }
                var dom = `<span class="badge bg-info" onclick="editPost('${item.id}');" style="cursor: pointer;"><span class="mdi mdi-square-edit-outline"></span> 编辑</span>`;
                dom = dom + `<span class="badge bg-danger" onclick="removePost('${item.id}');" style="cursor: pointer; margin-left: 5px;"><span class="mdi mdi-delete-outline"></span> 删除</span>`;
                return dom;
              }},
          ]
      });
 });
</script>